<template>
    
  <div class="project">
    <!-- 项目搜索区域 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- 项目分类 -->
      <el-form-item label="项目分类">
        <el-select v-model="formInline.style" placeholder="请选择">
          <el-option
            v-for="item1 in options1"
            :key="item1.value"
            :label="item1.label"
            :value="item1.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 项目名称 -->
      <el-form-item label="项目名称" class="project_name">
        <el-input v-model="formInline.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <!-- 启用状态 -->
      <el-form-item label="启用状态">
        <el-select v-model="formInline.usestate" placeholder="请选择">
          <el-option
            v-for="item2 in options2"
            :key="item2.value"
            :label="item2.label"
            :value="item2.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 搜索/添加 -->
      <el-button type="success" icon="el-icon-search" @click="searchProject">搜索</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </el-form>

    <!-- 表格区域 -->
    <el-table  :data="tableData"  style="width: 100%" >
      <el-table-column  label="序号"  width="100">
        <template scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column  prop="style" label="项目分类"  width="100"></el-table-column>
      <el-table-column  prop="name" label="项目名称"  width="130"></el-table-column>
      <el-table-column  prop="price" label="单价（元）"  width="130"></el-table-column>
      <el-table-column  prop="department" label="执行科室"  width="130"></el-table-column>
      <el-table-column  prop="usestate" label="启用状态"  width="180"></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.row)"> 编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row._id)">删除</el-button> 
        </template>
      </el-table-column>
    </el-table> 

    <!-- 点击编辑出现的弹窗 -->
    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" size="tiny" >
    <el-form :model="form" ref="updateForm"  :rules="rules" label-width="80px">
      <el-form-item label="项目类型" prop="style">
        <el-input v-model="form.style"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="执行科室" prop="department">
        <el-input v-model="form.department"></el-input>
      </el-form-item>
      <el-form-item label="启用状态" prop="usestate">
      <el-select v-model="form.usestate" placeholder="请选择">
        <el-option label="ture" value="ture"></el-option>
        <el-option label="false" value="false"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item class="center">
       <template scope="scope">
        <el-button type="primary" @click="handleUpdate(scope.row)" :loading="editLoading">修改</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </template>
      </el-form-item>
    </el-form>
  </el-dialog>  

  <!-- 点击添加项目出现的弹窗 -->
   <el-dialog title="添加项目信息" :visible.sync="dialogFormVisibleadd"  size="tiny">
    <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="项目类型" prop="style">
        <el-input v-model="form.style"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="执行科室" prop="department">
        <el-input v-model="form.department"></el-input>
      </el-form-item>
      <el-form-item label="启用状态" prop="usestate">
        <el-input v-model="form.usestate"></el-input>
      </el-form-item>
      <el-form-item class="center">
        <el-button type="primary" @click="handleSaveadd" :loading="editLoading" >添加</el-button>
        <el-button @click="dialogFormVisibleadd = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>  

  <!-- 分页器 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</div>
</template>

<script>
import { reqAddProject, reqDeleteProject, reqGetAllProject, reqSearchProject, reqUpdateProject } from '@/api';
export default {
  name: "project",
  data() {
    return {
       tableData: [ //表格数据
      {
        style: "",
        name: "",
        price: "",
        department: "",
        usestate: "",
      },
    ],
       
      //  添加的数据
       form: {
        style: "",
        name: "",
        company: "",
        price: "",
        department: "",
        usestate: "",
      },
// 表单验证
      rules: {
        style: [
          { required: true, 
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'change',
          },
        ],
         name: [
          { required: true, message: '长度在 2 到 10 个字符', trigger: 'change',min:2,max:10 },
        ],
        price: [
          { required: true, message: '长度在 1到 20个字符', trigger: 'change' ,min:1,max:100},
        ],
        department: [
          { required: true, message: '长度在 2 到 10 个字符', trigger: 'change' ,min:2,max:10},
        ],
        usestate: [
          { required: true, message: '长度在 4 到 5 个字符', trigger: 'change' ,min:4,max:5},
        ],
      },


      options1: [
        {
          value: "选项1",
          label: "手术费",
        },
        {
          value: "选项2",
          label: "检查费",
        },
        {
          value: "选项3",
          label: "化疗费",
        },
        {
          value: "选项4",
          label: "医药费",
        },
        {
          value: "选项5",
          label: "其他",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "true",
        },
        {
          value: "选项2",
          label: "false",
        },
      ],
      value1: "", //项目分类
      value2: "", //启用状态
      input: "", //项目名称
      dialogFormVisible: false,
      dialogFormVisibleadd: false,
      editLoading: false, //是否显示修改状态
      currentPage1: 5,
      activeIndex: "1",
      formInline: {
        style: "",
        name: "",
        usestate: "",
      },
     
     
    };
  },
  mounted() {
    this.getAllProject()
  },
  methods:{

    // 获取表格数据
    async getAllProject(){
      let result = await reqGetAllProject('/allProject')
       console.log(result);
      if(result.code === 200){
        this.tableData = result.data
      }
    },

    // 点击添加按钮显示添加页面
     handleCreate() {
      this.initform(); // //每次都初始化
      this.dialogFormVisibleadd = true;
    },
    //每次都初始化为空
    initform() {
      this.form = {
        style: "",
        name: "",
        price: "",
        department: "",
        usestate: "",
      };
    },
  //  点击添加按钮 添加新项目成功
   handleSaveadd() {
       this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          // 表单验证全都成功了
          let result
          if (this.form._id) {
            // 修改
            result = await reqUpdateProject(
              this.form
            )
          } else {
            // 添加
            result = await reqAddProject(this.form)
          }
          if (result.code === 200) {
            // 提示
            this.$message.success(
              `${this.form._id ? '修改' : '添加'}品牌成功了`
            )
            // 重新获取数据
            this.getAllProject(this.form._id ? this.page : 1)
            // 关闭对话框
            this.dialogFormVisibleadd = false
          } else {
            this.$message.error(
              `${this.form._id ? '修改' : '添加'}品牌失败了`
            )
          }
        }
      })
    },


  // 点击编辑
    handleEdit(row) {
      // 显示对话框
      this.dialogFormVisible = true;
      // 更新表单中绑定的数据
      this.form = { ...row }
    },
    handleUpdate(){
      this.$refs.updateForm.validate(async (valid) => {
        if (valid) {
          // 表单验证全都成功了
          let result
          if (this.form._id) {
            // 修改
            result = await reqUpdateProject(
              this.form
            )
          } else {
            // 添加
            result = await reqAddProject(this.form)
          }
          if (result.code === 200) {
            // 提示
            this.$message.success(
              `${this.form._id ? '修改' : '添加'}品牌成功了`
            )
            // 重新获取数据
            this.getAllProject(this.form._id ? this.page : 1)
            // 关闭对话框
            this.dialogFormVisible = false
          } else {
            this.$message.error(
              `${this.form._id ? '修改' : '添加'}品牌失败了`
            )
          }
        }
      })
    },

// 点击删除
 async handleDelete(_id){
    if(_id){
      if(confirm('确定删除吗？')){
        let result = await reqDeleteProject({_id})
        console.log(result);
        if(result.code === 200){
          // 重新获取数据
            this.getAllProject()
           this.$message({
              type: 'success',
              message: '删除成功!',
            })
            
        }else{
          this.$message.error('删除失败')
        }
      }
    }
},

  
  // 点击搜索
  async searchProject(){
    let result = await reqSearchProject(this.formInline)
    console.log(result);
    if(result.code === 200){
      this.tableData = result.data;
    }else{
      
      this.tableData = [{
        style: "",
        name: "",
        price: "",
        department: "",
        usestate: "",
      }]
       this.$message({
          type: 'warning',
          message: '暂无数据',
       })
    }
    this.formInline = {
        style: "",
        name: "",
        usestate: "",
      }
  },
    
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.project {
  margin-top: 15px;
  height: 550px;
}
</style>
